<template>
  <el-container class="payment-container">
    <el-card shadow="hover">
      <h2 class="order-title">订单信息</h2>
      <div class="order-info">
        <p>订单号: <strong>{{ order.orderNum }}</strong></p>
        <p>购买数量: <strong>{{ order.num }}</strong></p>
        <p>支付金额: <strong>¥{{ order.coins }}</strong></p>
      </div>
      <!-- 动态控制按钮的禁用状态、颜色和文本 -->
      <el-button
        class="pay-button"
        type="primary"
        :class="{ 'is-disabled': order.type === 2 }"
        :disabled="order.type === 2"
        @click="showQRCode = true"  
      >
        {{ order.type === 2 ? '已支付' : '确认支付' }}
      </el-button>
    </el-card>
    <!-- 显示二维码的弹窗 -->
    <el-dialog v-model="showQRCode" title="扫描二维码完成支付" width="50%">
      <RQ :order-id="orderId"/>  <!-- 展示二维码组件 -->
    </el-dialog>
  </el-container>
</template>
  
<script setup lang="ts">
import { defineProps, onMounted, ref } from 'vue';
import { ElMessage, ElDialog } from 'element-plus';
import axios from 'axios';
import { useRoute } from 'vue-router';
import router from '@/router';
import RQ from './components/RQ.vue';


const route = useRoute();
const orderId = route.params.id;
const order = ref({});

const showQRCode = ref(false);  // 控制二维码弹窗显示

// 获取订单信息
onMounted(() => {
  axios.get('/api/orders/' + orderId)
    .then((response) => {
      // 处理订单信息
      order.value = response.data.data;
    })
    .catch((error) => {
      console.error('获取订单信息失败:', error);
    });
});

// 提交支付请求
// const submitPayment = () => {
//   axios.post('/api/orders/pay_order/' + payToken)
//     .then((response) => {
//       if (response.data.code === 200) {
//         ElMessage.success('支付成功！');
//         router.push('/');
//       } else {
//         console.error('支付失败:', response.data.msg);
//         ElMessage.error('支付失败，请重试！');
//       }
//     })
//     .catch((error) => {
//       console.error('支付请求失败:', error);
//       ElMessage.error('支付请求失败，请稍后再试！');
//     });
// };
</script>
  <style scoped>
  .payment-container {
    /* 使用 flexbox 实现垂直和水平居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 设置为全屏高度 */
    padding: 0 20px;
    background-color: #f9f9f9;
  }
  
  .el-card {
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    max-width: 500px;
    width: 100%; /* 使卡片在小屏幕时自适应 */
  }
  
  .order-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
  }
  
  .order-info {
    margin-bottom: 30px;
  }
  
  .order-info p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
  }
  
  .order-info strong {
    color: #333;
    font-weight: bold;
  }
  
  .pay-button {
    width: 100%;
    height: 45px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    transition: background-color 0.3s ease;
  }
  
  .is-disabled {
    background-color: #d3d3d3 !important;
    color: #ffffff !important;
    cursor: not-allowed;
  }
  
  /* 使支付按钮在启用时有更好的交互效果 */
  .pay-button:not(.is-disabled):hover {
    background-color: #409EFF;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.4);
  }
  </style>
  